<template>
  <div >
    <div id="parent">
      <div id="login_left">
        <div>扫描二维码登录</div>
        <img src="@/public/login/img.jpg" alt="" style="display: block" />
        <div>
          请使用<a href="">cakecake客户端</a>
          <br />
          扫码登录或扫描下载APP
        </div>
      </div>
      <div>
        <div></div>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h2>轻听音乐</h2>
        </div>
        <el-form
          status-icon
          class="demo-form"
          ref="form"
          :model="form"
          label-width="80px"
          methods="get"
          :rules="rules2"
        >
          <el-row>
            <el-form-item prop="rname">
              <el-input
                type="text"
                v-model="form.rname"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="rpass">
              <el-input
                v-model="form.rpass"
                id="password"
                type="password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register('form')"
                >登录</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
        <hr />
        <p>登录代表同意 <a href="#">隐私政策</a> 和 <a href="#">服务条款</a></p>
      </el-card>

      <div id="img">
        <img id="img_left" src="@/public/login/left_t.png" alt="" />
        <img id="img_right" src="@/public/login/right_t.png" alt="" />
      </div>
    </div>
  </div>
</template>
  
  <script>
import $ from "@/jquery-1.12.4";
import { url } from "@/apiUrl"; //引入地址
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入密码"));
        return false;
      } else {
        callback();
      }
    };
    var checkRname = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };

    var checkRpass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var checkRpass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.rpass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      log: false,
      User: {
        name: "",
        password: "",
      },
      form: {
        name: "",
        pass: "",
        rname: "",
        // captcha: "",
        rpass: "",
        rpass2: "",
        rname: "",
      },
      toggle1: "",
      rules2: {
        name: [{ validator: checkName, trigger: "blur" }],
        pass: [{ validator: checkPass, trigger: "blur" }],
        rname: [{ validator: checkRname, trigger: "blur" }],
        // captcha: [{ validator: checkCaptcha, trigger: "blur" }],
        rpass: [{ validator: checkRpass, trigger: "blur" }],
        rpass2: [{ validator: checkRpass2, trigger: "blur" }],
      },
    };
  },
  components: {},
  methods: {
    getUser() {},
    cutLog(flag) {
      this.$data.log = flag;
    },
    async register(formName) {
      // console.log(formName);
      var flag = false;
      this.$refs[formName].validate((valiDatas) => {
        if (valiDatas) {
          flag = valiDatas;
        }
      });
      if (flag) {
        this.$axios
          .post(`${url}/users/login`, {
            user_id: this.form.rname,
            user_pwd: this.form.rpass,
          })
          .then((res) => {
            console.log (res.data)
            console.log(this.form.rname);
            console.log( this.form.rpass);
            if (res.data.code == 200) {
              this.$message.success("登录成功");
              //  存入token
              console.log(res.data.data.token);
              localStorage["qtUser"] = res.data.data.token;
              localStorage["qtUserId"]=this.form.rname
              // console.log(`存入的用户token值为：${localStorage["qtUser"]}`);
              this.$emit("enter", true,this.form.rname); //将登录成功派发到父组件
            } else if(res.data.code == 403){
              this.$message.error("用户已冻结");
            }
            else {
              this.$message.warning("账号或密码错误");
            }
          });
      } else {
        this.$message.error("完善信息!");
        return false;
      }
    },
    change(val) {
      if (val == 1) {
        this.toggle1 = true;
        this.$refs.form.resetFields();
      } else {
        this.toggle1 = false;
        this.$refs.form.resetFields();
      }
    },
  },
  mounted() {
    var that = this;
    var flag = false;
    function change_img() {
      if (flag) {
        flag = false;
        document.getElementById(
          "img_left"
        ).src = require("@/public/login/left_t.png");
        document.getElementById(
          "img_right"
        ).src = require("@/public/login/right_t.png");
      } else {
        flag = true;
        document.getElementById(
          "img_left"
        ).src = require("@/public/login/left_f.png");
        document.getElementById(
          "img_right"
        ).src = require("@/public/login/right_f.png");
      }

    }
    //1.当用户名的输入框失焦时，对用户名进行非空验证：
    //如果为空则输入框边框变红，且在usernameMsg中显示“用户名不能为空”
    //输入用户名后，边框恢复为黑色

    //2.当密码输入框失焦时，先验证密码是否为空，如果为空则在passwordMsg中显示“密码不能为空”，且输入框边框变红
    //如果不为空，则验证长度是否少于6位，如果少于6位，则在passwordMsg中显示“密码长度不能少于6位”，且输入框边框变红
    var password = document.getElementById("password");
    password.addEventListener("blur", function () {
      change_img(true);
    });
    password.addEventListener("focus", function () {
      change_img(true);
    });

    // ！！！检查
    // function checkLogin() {
    //   let token = localStorage.getItem("qtUser");
    //   // 在main.js中自动登录
    //   // const token = localStorage.getItem("token");
    //   if (token) {
    //     this.axios
    //       .post("/verify-token", { token: localStorage.getItem("token") })
    //       .then((response) => {
    //         // 处理成功响应
    //         console.log(response.data.user);
    //       });
    //   }
    // }
    // checkLogin();
  },
};
</script>
  
  <style lang="scss" scoped>
@import "../../assets/common.scss";
a {
  color: $undercolor !important;
}
.box-card {
  z-index: 9;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
}
input {
  background: none;
  outline: none;
  border: none;
}
#parent {
  display: flex;
  justify-content: center;
  z-index: 5;
  /* background-image:url(../../assets/背景.jpg);    */
}
#login_left {
  flex-direction: column;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#login_left + div {
  width: 20px;
}
#login_left img {
  width: 160px;
  height: 160px;
  margin: 0 40px 30px 0;
  margin-right: 1px;
}
#login_left > div {
  width: 100%;
  height: 16px;
  margin-bottom: 26px;
  text-align: center;
}
#login_left + div {
  width: 40px;
  height: 330px;
  flex-direction: row;
  align-items: center;
}
#login_left + div div {
  width: 38%;
  height: 77%;
  margin-top: 4rem;
  border-right: 1px solid #442818;
}
#login_left a {
  text-decoration: none;
  color: $undercolor;
}
#login {
  // position:absolute;
  width: 40%;
  border-radius: 4%;
  background-color: $undercolor-1;
  /* border-radius: 2%; */
  box-shadow: 1px 1px 10px 1px $undercolor;
  z-index: 1;
}

#img {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  z-index: 0;
}
#img img {
  width: 300px;
}
#userImg {
  float: right;
}
.code {
  border-bottom: 1px solid #ffe1024d;
}
//   登录页面
.el-main img {
  width: 500px;
  height: 270px;
  position: absolute;
  top: 200px;
  left: 120px;
  background-repeat: no-repeat;
}

/* 登录的框框 */
.box-card {
  background-color: $undercolor-1;
  top: 17%;
  right: 29%;
  text-align: center;
}

/* 输入的框框 */
.el-form {
  width: 40rem;
  height: auto;
}

.el-form-item {
  margin: 10px 40px 20px -40px;
}

.el-button {
  width: 200px;
}

p,
p > a {
  color: rgb(156, 156, 156);
}

.captchaLogin {
  color: rgb(132, 132, 132);
  text-decoration: none;
}

.captchaLogin:hover {
  color: rgb(255, 78, 107);
}

.captchaInput {
  width: 320px;
}

.captcha {
  width: 100px;
  padding: 12px 8px;
}
</style>